JavaScriptin templaattiliteraalit: Tagatut templaatit vastaan merkkijonojen käsittely

ECMAScript 2015:n (ES6) myötä esitellyt JavaScriptin templaattiliteraalit mullistivat merkkijonojen käsittelyn JavaScriptissä. Ne tarjoavat siistimmän, luettavamman vaihtoehdon perinteiselle merkkijonojen yhdistämiselle ja tuovat mukanaan tehokkaita ominaisuuksia, kuten moniriviset merkkijonot ja merkkijonojen interpoloinnin. Mutta perusteiden lisäksi tagatut templaatit avaavat aivan uuden tason merkkijonojen käsittelymahdollisuuksia. Tämä opas tutkii templaattiliteraalien vivahteita, syventyen tagattuihin templaatteihin ja verraten niitä perinteisiin merkkijonojen käsittelytekniikoihin.

Mitä ovat templaattiliteraalit?

Templaattiliteraalit ovat merkkijonoliteraaleja, jotka sallivat upotettuja lausekkeita. Ne on suljettu gravis-merkin (`) sisään kaksois- tai yksinkertaisten lainausmerkkien sijaan. Tämä yksinkertainen muutos avaa valtavasti mahdollisuuksia.

Perussyntaksi ja interpolointi

Templaattiliteraalien perusominaisuus on merkkijonojen interpolointi. Voit upottaa JavaScript-lausekkeita suoraan merkkijonoon käyttämällä ${lauseke}-syntaksia. Lauseke evaluoidaan, ja sen tulos muunnetaan merkkijonoksi ja lisätään templaattiliteraaliin.

            
const name = 'Alice';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Tuloste: Hello, my name is Alice and I am 30 years old.

            

              
                Copy
              
            
          

Tämä on huomattavasti siistimpää ja luettavampaa kuin vastaava merkkijonojen yhdistäminen:

            
const name = 'Alice';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting);

            

              
                Copy
              
            
          

Moniriviset merkkijonot

Templaattiliteraalit yksinkertaistavat myös monirivisten merkkijonojen luomista. Voit yksinkertaisesti lisätä rivinvaihtoja suoraan gravis-merkkien sisään ilman kömpelöitä \n-merkkejä.

            
const multiLineString = `This is a
multi-line
string.`;
console.log(multiLineString);
/* Tuloste:
This is a
multi-line
string.
*/

            

              
                Copy
              
            
          

Vastaavasti monirivisten merkkijonojen luominen perinteisellä merkkijonojen yhdistämisellä voi olla virhealtista ja vaikealukuista.

Tagatut templaatit: Vapauta voima

Tagatut templaatit ovat todellinen mullistus. Ne mahdollistavat templaattiliteraalien käsittelyn funktiolla. Tagi on yksinkertaisesti funktio, jota kutsutaan templaattiliteraalin osilla ja interpoloiduilla arvoilla.

Syntaksi ja funktion rakenne

Tagattujen templaattien syntaksi on suoraviivainen. Edellät templaattiliteraalia tag-funktion nimellä:

            
const name = 'Bob';
const age = 25;
const result = myTag`My name is ${name} and I am ${age} years old.`;
console.log(result);

            

              
                Copy
              
            
          

myTag-funktio vastaanottaa seuraavat argumentit:

• strings: Taulukko merkkijonoliteraaleja templaatista.
• ...values: Interpoloitujen lausekkeiden arvot.

strings-taulukko sisältää merkkijonon osat interpoloitujen arvojen *edellä*, *välissä* ja *jälkeen*. values-argumentti on rest-parametri (...values), joka kerää kaikki interpoloidut arvot taulukkoon.

            
function myTag(strings, ...values) {
  console.log('strings:', strings);
  console.log('values:', values);
  return 'Processed String';
}

const name = 'Bob';
const age = 25;
const result = myTag`My name is ${name} and I am ${age} years old.`;
/* Tuloste:
strings: ["My name is ", " and I am ", " years old.", raw: Array(3)]
values: ["Bob", 25]
*/

            

              
                Copy
              
            
          

Huomaa, että strings-taulukolla on myös raw-ominaisuus, joka sisältää raa'at, escapoimattomat merkkijonoliteraalit. Tämä on hyödyllistä käsiteltäessä escape-sekvenssejä.

Omien tagien luominen: Käytännön esimerkkejä

Tagattujen templaattien todellinen voima piilee mahdollisuudessa määrittää omia tageja tiettyihin merkkijonojen käsittelytehtäviin. Tässä on joitakin käytännön esimerkkejä:

1. HTML-escapointi

Sivustojen välisten komentosarjojen (XSS) hyökkäysten estäminen on ratkaisevan tärkeää verkkoturvallisuudelle. Tagattu templaatti voi automaattisesti escapoida HTML-entiteetit interpoloiduissa arvoissa.

            
function escapeHTML(strings, ...values) {
  const escapedValues = values.map(value => {
    return String(value)
      .replace(/&/g, '&')
      .replace(//g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  });
  let result = strings[0];
  for (let i = 0; i < escapedValues.length; i++) {
    result += escapedValues[i] + strings[i + 1];
  }
  return result;
}

const userInput = '';
const safeHTML = escapeHTML`
User input: ${userInput}
`;
console.log(safeHTML);
// Tuloste: 
User input: <script>alert("XSS");</script>

            

              
                Copy
              
            
          

2. Lokalisointi (i18n)

Tagattuja templaatteja voidaan käyttää kansainvälistämisen (i18n) yksinkertaistamiseen tarjoamalla kätevä tapa hakea käännöksiä kielikoodin perusteella.

            
// Yksinkertaistettu esimerkki (vaatii käännössanakirjan)
const translations = {
  en: {
    greeting: 'Hello, {name}!',
    agePrompt: 'You are {age} years old.'
  },
  fr: {
    greeting: 'Bonjour, {name} !',
    agePrompt: 'Vous avez {age} ans.'
  },
  es: {
    greeting: '¡Hola, {name}!',
    agePrompt: 'Tienes {age} años.'
  }
};

let currentLanguage = 'en';

function i18n(strings, ...values) {
  const key = strings.join('{}'); // Yksinkertainen avaimen luonti, voidaan parantaa
  const translation = translations[currentLanguage][key];

  if (!translation) {
    console.warn(`Translation not found for key: ${key}`);
    return strings.reduce((acc, part, i) => acc + part + (values[i] || ''), ''); // Palauta alkuperäinen merkkijono
  }

  // Korvaa paikkamerkit arvoilla
  let result = translation;
  values.forEach((value, index) => {
    result = result.replace(`{${index}}`, value);
  });

  return result;
}

const name = 'Carlos';
const age = 35;

console.log(i18n`Hello, {name}! You are {age} years old.`); // Tuloste (englanniksi): Hello, Carlos! You are 35 years old.

currentLanguage = 'fr';
console.log(i18n`Hello, {name}! You are {age} years old.`); // Tuloste (ranskaksi): Translation not found, so returns English: Hello, Carlos! You are 35 years old. (koska tarvitaan monimutkaisempi avain.)

            

              
                Copy
              
            
          

Huom: Tämä on yksinkertaistettu esimerkki. Todellisessa tilanteessa käyttäisit vankempaa käännöskirjastoa ja avaintenluontistrategiaa.

3. Tyylittely ja muotoilu

Tagattuja templaatteja voidaan käyttää mukautetun tyylittelyn tai muotoilun soveltamiseen merkkijonoihin. Voisit esimerkiksi luoda tagin, joka automaattisesti lisää lihavoinnin tietyille sanoille.

            
function bold(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += `${values[i]}` + strings[i + 1];
  }
  return result;
}

const item = 'product';
const price = 99.99;
const formattedString = bold`The ${item} costs ${price}.`;
console.log(formattedString); // Tuloste: The product costs 99.99.

            

              
                Copy
              
            
          

4. Syötteen validointi

Tagattuja templaatteja voidaan käyttää myös syötetietojen validoimiseen. Tämä on erityisen hyödyllistä varmistettaessa, että käyttäjän antamat arvot noudattavat tiettyjä sääntöjä.

            
function validateEmail(strings, ...values) {
  const email = values[0]; // Olettaen vain yhden arvon: sähköpostiosoitteen
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 

  if (!emailRegex.test(email)) {
    return 'Invalid email address.';
  }
  return `Valid email: ${email}`;
}

const email1 = 'test@example.com';
const email2 = 'invalid-email';

console.log(validateEmail`Email address: ${email1}`); // Tuloste: Valid email: test@example.com
console.log(validateEmail`Email address: ${email2}`); // Tuloste: Invalid email address.

            

              
                Copy
              
            
          

Tagattujen templaattien tietoturvanäkökohdat

Vaikka tagatut templaatit tarjoavat monia etuja, on tärkeää olla tietoinen mahdollisista tietoturvavaikutuksista, erityisesti käsiteltäessä käyttäjän syötteitä. Puhdista tai escapoi aina käyttäjän antamat arvot estääksesi XSS-haavoittuvuuksia. Jos käytät tagia kolmannen osapuolen kirjastosta, varmista, että se on hyvin tarkastettu ja luotettava.

Merkkijonojen käsittelytekniikat: Vertailu

Tagatut templaatit tarjoavat tehokkaan ja joustavan tavan käsitellä merkkijonoja, mutta ne eivät aina ole paras ratkaisu jokaiseen tilanteeseen. Tässä on vertailu muihin yleisiin merkkijonojen käsittelytekniikoihin.

Säännölliset lausekkeet

Säännölliset lausekkeet ovat tehokkaita työkaluja hahmojen tunnistukseen ja manipulointiin merkkijonoissa. Ne soveltuvat hyvin tehtäviin, kuten:

• Syötemuotojen validointi (esim. sähköpostiosoitteet, puhelinnumerot).
• Tiettyjen tietojen poimiminen merkkijonoista (esim. kaikkien URL-osoitteiden löytäminen dokumentista).
• Hahmojen korvaaminen merkkijonoissa (esim. kaikkien HTML-tagien poistaminen).

Edut:

• Erittäin tehokkaita monimutkaisessa hahmojentunnistuksessa.
• Laajasti tuettuja ja hyvin ymmärrettyjä.

Haitat:

• Voivat olla vaikealukuisia ja -ylläpidettäviä, erityisesti monimutkaisten hahmojen kanssa.
• Voivat olla vähemmän joustavia kuin tagatut templaatit tietyissä tehtävissä.

            
const text = 'This is a string with some URLs: https://www.example.com and http://another.example.org.';
const urls = text.match(/(https?:\/\/[^\s]+)/g);
console.log(urls); // Tuloste: [ 'https://www.example.com', 'http://another.example.org' ]

            

              
                Copy
              
            
          

Merkkijonometodit (substring, slice, replace, jne.)

JavaScriptin sisäänrakennetut merkkijonometodit tarjoavat perustyökalut merkkijonojen manipulointiin. Ne soveltuvat yksinkertaisiin tehtäviin, kuten:

• Osamerkkijonojen poimiminen.
• Merkkien tai osamerkkijonojen korvaaminen.
• Merkkijonojen muuntaminen isoiksi tai pieniksi kirjaimiksi.

Edut:

• Yksinkertaisia ja helppokäyttöisiä perusmerkkijonotoiminnoissa.
• Yleensä tehokkaita yksinkertaisissa tehtävissä.

Haitat:

• Voivat muuttua kömpelöiksi monimutkaisemmassa merkkijonojen manipuloinnissa.
• Vähemmän joustavia kuin säännölliset lausekkeet tai tagatut templaatit.

            
const str = 'Hello, world!';
const substring = str.substring(0, 5); // Poimi ensimmäiset 5 merkkiä
console.log(substring); // Tuloste: Hello

            

              
                Copy
              
            
          

Milloin käyttää tagattuja templaatteja, säännöllisiä lausekkeita tai merkkijonometodeja

Käytettävän tekniikan valinta riippuu tehtävän erityisvaatimuksista.

• Tagatut templaatit: Käytä monimutkaisiin merkkijonojen käsittelytehtäviin, jotka vaativat mukautettua logiikkaa, kuten HTML-escapointi, lokalisointi, tyylittely ja syötteen validointi. Ne ovat hyödyllisiä myös toimialuekohtaisten kielten (DSL) luomisessa.
• Säännölliset lausekkeet: Käytä hahmojen tunnistukseen, poimintaan ja korvaamiseen. Ne soveltuvat erityisen hyvin syötemuotojen validointiin ja datan poimimiseen merkkijonoista.
• Merkkijonometodit: Käytä yksinkertaisiin merkkijonojen manipulointitehtäviin, kuten osamerkkijonojen poimimiseen, merkkien korvaamiseen ja kirjainkoon muuttamiseen.

Joissakin tapauksissa saatat joutua yhdistämään eri tekniikoita saavuttaaksesi halutun tuloksen. Voit esimerkiksi käyttää tagattua templaattia HTML-entiteettien escapoimiseen ja sen jälkeen käyttää säännöllisiä lausekkeita tiettyjen tietojen poimimiseen escapoidusta merkkijonosta.

Parhaat käytännöt ja huomioitavat seikat

• Pidä tag-funktiosi pieninä ja kohdennettuina. Tag-funktion tulisi ihanteellisesti suorittaa yksi, hyvin määritelty tehtävä.
• Käytä kuvaavia nimiä tag-funktioillesi. Tämä tekee koodistasi helpommin luettavaa ja ymmärrettävää.
• Käsittele virheet siististi. Jos tag-funktiosi kohtaa virheen, sen tulisi palauttaa merkityksellinen virheilmoitus tai heittää poikkeus.
• Ota huomioon suorituskyky. Tag-funktiot voivat mahdollisesti vaikuttaa suorituskykyyn, erityisesti jos niitä käytetään usein tai ne suorittavat monimutkaisia operaatioita.
• Harkitse kirjaston käyttöä yleisiin tag-tehtäviin. Saatavilla on useita kirjastoja, jotka tarjoavat valmiita tag-funktioita tehtäviin, kuten HTML-escapointiin, lokalisointiin ja tyylittelyyn.
• Puhdista aina käyttäjän syöte estääksesi tietoturvahaavoittuvuuksia. Tämä on erityisen tärkeää, kun käytät tagattuja templaatteja käyttäjän antamien arvojen käsittelyyn.

Yhteenveto

JavaScriptin templaattiliteraalit, erityisesti tagattujen templaattien myötä, tarjoavat tehokkaan ja joustavan tavan käsitellä merkkijonoja. Ymmärtämällä tagattujen templaattien edut ja rajoitukset ja vertaamalla niitä muihin merkkijonojen käsittelytekniikoihin, voit kirjoittaa tehokkaampaa, luettavampaa ja turvallisempaa koodia. Olitpa rakentamassa verkkosovelluksia, komentorivityökaluja tai palvelinpuolen sovelluksia, templaattiliteraalien ja tagattujen templaattien hallitseminen parantaa merkittävästi JavaScript-taitojasi.